<template>
    <el-container class="main-container">
        <!-- 头部区域 -->
        <el-header>
            <!-- 左侧的 logo -->

            <img src="../../assets/images/logo.png" alt="" />
            <!-- 右侧的菜单 -->
            <el-menu class="el-menu-top" mode="horizontal" background-color="#23262E" text-color="#fff"
                active-text-color="#409EFF">
                <el-submenu index="1">
                    <template slot="title">
                        <!-- 头像   -->
                        <img :src="userinfo.user_pic" alt="" class="avatar" v-if="userinfo.user_pic" />
                        <img src="../../assets/logo.png" alt="" class="avatar" v-else />
                        <span>个人中心</span>
                    </template>
                    <el-menu-item index=" 1-1"><i class="el-icon-s-operation"></i>基本资料</el-menu-item>
                    <el-menu-item index="1-2"><i class="el-icon-camera"></i>更换头像</el-menu-item>
                    <el-menu-item index="1-3"><i class="el-icon-key"></i>重置密码</el-menu-item>
                </el-submenu>
                <el-menu-item @click="logout" index="2"><i class="el-icon-switch-button"></i>退出</el-menu-item>
            </el-menu>
        </el-header>
        <el-container>
            <!-- 侧边栏区域 -->
            <el-aside width="200px">
                <div class="user-box">
                    <img :src="userinfo.user_pic" alt="" v-if="userinfo.user_pic" />
                    <img src="../../assets/logo.png" alt="" v-else />
                    <span>欢迎{{ userinfo.nickname || userinfo.username }} </span>
                </div>

                <el-menu default-active="1" class="el-menu-vertical-demo" background-color="#23262E" text-color="#fff"
                    active-text-color="#409EFF" unique-opened router>
                    <!-- 不包含子菜单的“一级菜单” -->
                    <template v-for="item in menusList">
                        <!-- 不包含子菜单的“一级菜单”    首页 -->
                        <el-menu-item :index="item.indexPath" :key="item.indexPath" v-if="!item.children">
                            <i :class="item.icon"></i>{{ item.title }}
                        </el-menu-item>
                        <!-- 包含子菜单的“一级菜单” -->
                        <el-submenu :index="item.indexPath" :key="item.indexPath" v-else>
                            <template slot="title">
                                <i :class="item.icon"></i>
                                <span>{{ item.title }}</span>
                            </template>
                            <!-- 循环渲染“二级菜单” -->
                            <el-menu-item :index="subItem.indexPath" v-for="subItem in item.children"
                                :key="subItem.indexPath">
                                <i :class="subItem.icon"></i>{{ subItem.title }}
                            </el-menu-item>
                        </el-submenu>
                    </template>
                </el-menu>

            </el-aside>
            <el-container>
                <!-- 页面主体区域 -->
                <el-main>
                    <!-- Main.vue后台主页 -->
                    <router-view></router-view>
                </el-main>
                <!-- 底部 footer 区域 -->
                <el-footer>© www.itheima.com - 黑马程序员</el-footer>
            </el-container>
        </el-container>
    </el-container>
</template>
  
<script>
import { getmenus } from "../../api/user"
import { mapState } from "vuex"
import router from "../../router"
export default {
    name: "Main",
    data() {
        return {
            menusList: []
        };
    },
    computed: {
        // 有模块 需要模块名  将user模块中的 info映射为当前组件的计算属性
        ...mapState("user", ["userinfo"])
    },
    created() {
        this.$store.dispatch("user/getUserinfo");
        this.initMenus();
    },
    methods: {
        // 获取左侧菜单栏
        async initMenus() {
            try {
                const res = await getmenus();
                console.log("getmenus", res);
                // 保存数据
                this.menusList = res.data;
            }
            catch (err) {
                console.log("getmenus", err);
            }
        },
        // 退出登陆
        logout() {
            console.log("我被点击了");
            //删除提示
            this.$confirm("你确定要退出吗, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                // 清空vuex中的数据
                // 清空token
                this.$store.commit("user/delUserinfo");
                this.$store.commit("user/delToken");
                // 2. 跳转到登录页面
                this.$router.push("/login");
            }).catch((err) => {
                console.log(err);
                this.$message({
                    type: "info",
                    message: "已取消删除"
                });
            });
        }
    },
    components: { router }
}
</script>
  
<style lang="less" scoped>
// 侧边栏菜单的样式
.el-aside {

    .el-submenu,
    .el-menu-item {
        width: 200px;
        user-select: none;
    }
}

.main-container {
    height: 100%;

    .el-header,
    .el-aside {
        background-color: #23262e;
    }

    .el-header {
        padding: 0;
        display: flex;
        justify-content: space-between;
    }

    .el-main {
        overflow-y: scroll;
        height: 0;
        background-color: #F2F2F2;
    }

    .el-footer {
        background-color: #eee;
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.avatar {
    border-radius: 50%;
    width: 35px;
    height: 35px;
    background-color: #fff;
    margin-right: 10px;
    object-fit: cover;
}

// 左侧边栏用户信息区域
.user-box {
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    user-select: none;

    img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background-color: #fff;
        margin-right: 15px;
        object-fit: cover; //图片居中裁剪
    }

    span {
        color: white;
        font-size: 12px;
    }
}
</style>
  